<template>
  <div class="storeUserModify common-container">
    <div class="common-top">
      <span class="left">
        <span class="go-back" @click.stop="$router.go(-1)">返回</span>
      </span>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
    <div class="common-bot">
      <div class="modify-bot">
        <el-form :model="form" label-width="100px">
          <el-form-item required label="头像" style="width: 50%">
            <el-avatar :size="'large'" :src="form.avatar"></el-avatar>
            <UploadFile
              :isCrop="true"
              :fileExName="['jpg', 'png', 'gif', 'jpeg']"
              @uploadSuc="uploadSuc"
            />
          </el-form-item>
          <el-form-item required label="昵称" style="width: 30%">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item required label="性别" style="width: 30%">
            <el-select v-model="form.gender" placeholder="请选择">
              <el-option
                v-for="item in genderOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item required label="账号" style="width: 30%">
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item required label="密码" style="width: 30%">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item required label="客户类型" style="width: 30%">
            <el-select v-model="form.role" placeholder="请选择">
              <el-option
                v-for="item in roleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            required
            label="账号级别(默认0普通版)"
            style="width: 30%"
          >
            <el-select v-model="form.vipId" placeholder="请选择">
              <el-option
                v-for="item in vipOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item required label="省份" style="width: 45%">
            <el-cascader
              ref="cascader"
              :props="{ checkStrictly: true }"
              :options="areaSelectData"
              class="full-width"
              size="large"
              v-model="form.province"
              placeholder="请选择"
            />
          </el-form-item>
          <el-form-item label="城市" style="width: 45%">
            <el-cascader
              ref="cascader"
              :props="{ checkStrictly: true }"
              :options="areaSelectData"
              class="full-width"
              size="large"
              v-model="form.city"
              placeholder="请选择"
            />
          </el-form-item>

          <!-- <el-form-item required label="父级账号(店主为0)" style="width: 30%">
            <el-input v-model="form.parentId"></el-input>
          </el-form-item> -->
          <!-- <el-form-item required label="工作门店(店主为0)" style="width: 50%">
            <el-select
              v-model="form.workStoreId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="是否启用" style="width: 30%">
            <el-switch v-model="form.enable"></el-switch>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import UploadFile from "@/components/uploadFile";
import {
  provinceAndCityData,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
import ManaApi from "@/api/index";
export default {
  name: "storeUserModify",
  components: { UploadFile },
  data() {
    return {
      areaSelectData: provinceAndCityData,
      genderOptions: [
        {
          label: "男",
          value: "male",
        },
        {
          label: "女",
          value: "female",
        },
      ],
      vipOptions: [
        {
          label: "普通版",
          value: "0",
        },
      ],
      form: {
        avatar: "",
        city: "",
        enable: true,
        formId: 0,
        gender: "male", //female
        mobile: "",
        name: "",
        parentId: "",
        password: "",
        province: "",
        role: "", //boss, employee
        vipId: "",
        workStoreId: 0,
      },
      roleOptions: [
        {
          label: "老板",
          value: "boss",
        },
        // {
        //   label: "员工",
        //   value: "employee",
        // },
      ],
      storeList:[]
    };
  },
  methods: {
    async remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        await this.getStoreList(query);
        this.loading = false;
      } else {
        await this.getStoreList();
        this.loading = false;
      }
    },
    getStoreList(query = "") {
      return new Promise((resolve, reject) => {
        ManaApi.store
          .list({
            limit: this.$$normalMaxLimit,
            page: 0,
            keyword: query,
          })
          .then((res) => {
            this.storeList = res.data;
            resolve();
          })
          .catch((err) => {
            reject();
          });
      });
    },
    uploadSuc(data) {
      this.$set(this.form, "avatar", data.url);
      console.log(data);
    },
    save() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.city = String(form.city);
      form.province = String(form.province);
      ManaApi.storeUserMana.edit(form).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.$router.go(-1);
        }
      });
    },
    getInfo() {
      ManaApi.storeUserMana
        .detail({
          targetId: this.$route.query.id,
        })
        .then((res) => {
          let city = res.data.city ? res.data.city.split(",") : [];
          this.form = {
            avatar: res.data.avatar,
            city,
            enable: res.data.enable,
            formId: res.data.id,
            gender: res.data.gender,
            mobile: res.data.mobile,
            name: res.data.name,
            parentId: res.data.parentId,
            password: res.data.password,
            province: res.data.province,
            role: res.data.role,
            vipId: res.data.vip.id,
            workStoreId: res.data.workStoreId,
          };
        });
    },
    getVipList() {
      return new Promise((resolve, reject) => {
        ManaApi.vip
          .list({
            page: 0,
            limit: this.$normalMaxLimit,
          })
          .then((res) => {
            let vipOptions = [];
            if (res && res.data && res.data.length) {
              res.data.forEach((item) => {
                let obj = {
                  label: item.name,
                  value: item.id,
                };
                vipOptions.push(obj);
              });
            }
            this.vipOptions = vipOptions;
            resolve();
          })
          .catch((err) => {
            reject();
          });
      });
    },
  },
  async mounted() {
    await this.getVipList();
    // await this.getStoreList();
    if (this.$route.query.type == "edit") {
      this.getInfo();
    }
  },
};
</script>
<style lang="scss" scoped>
.storeUserModify {
}
</style>